
<template>
	<view class="xcxzdsfgrtrt">

	</view>
	<view class="bgff btm pt20 pr pd">
		<view class="">
			<text class="iconfont icon-xiaolian z3 fz36 cz"></text>
			<text class="fz30 cz z3 ml10">这次任务带给你的感受是？</text>
		</view>
		<view class="jxzcxzertecr mt20">
			<view v-for="item in xcdfer" :key="item.value" @tap="jxcfdf(item)">
				<view class="vertical-center dfdsdsfsdrtr">
					<image :src="item.extra" class="xcxsdfertty" :class="item.cls?'':'act'" mode="widthFix"></image>
				</view>
				<view class="fz24 z6  cen">
					{{ item.label }}
				</view>
			</view>
		</view>
		<view class="mt40">
			<text class="iconfont icon-liuyan z3 fz36 cz"></text>
			<text class="fz30 cz z3 ml10">想和潜意识说点啥？</text>
		</view>
		<view class="mt20">
			<textarea v-model="formData.title" placeholder="这个世界只有你和你的潜意识" class="w100 fz30 pd pt20 sdfdsxcdsftr"></textarea>
		</view>
		<view class="xcxzcertet mt20">
			<view class="zcxfdfvdsgrt pr" v-for="(sd,idx) in imglist">
				<image :src="sd" class="w100 h100 cz" mode="aspectFill"></image>
				<view class="xzczxfsdtretrt vertical-center" @tap.stop="hjjhsdcfds(idx)">
					<text class="iconfont icon-tubiaoyanse cf fz24 b"></text>
				</view>
			</view>
			<view class="zcxfdfvdsgrt" @tap="kxcfdsfs">
				<image src="../../static/tianjia.png" class="w100 h100 cz" mode="aspectFill"></image>
			</view>
		</view>
		<view class="mt200 ">
			<button type="primary" class="fz32" @tap="jzxcdf">发布</button>
		</view>
	</view>
</template>
<script lang="ts" setup>
	import { onLoad } from "@dcloudio/uni-app"
	import { ref } from "vue"
	import { dxSToast, dxrequest,hfer,upImg,hf } from "@/util/index.js";
	const xcdfer = ref([])
	const imglist =ref([])
	const jifen =ref()
	const formData = ref({
		rwid:"",
		title:"",
		imgList:"",
		xqicon:null,
		xqtext:null
	})
	const initData = async () => {
		const { data } = await dxrequest("maya/api/getzidian", { id: 374 })
		data[0].map(a => {
			a.cls = ""
		})
		xcdfer.value = data[0]
	}
	initData()
	const jxcfdf =(sd)=>{
		xcdfer.value.map(a=>{
			a.cls=""
		})
		sd.cls ="act"
		formData.value.xqicon = sd.extra
		formData.value.xqtext = sd.label
		console.log(formData.value)
	}
	const kxcfdsfs =async()=>{
		const {imgurl} = await upImg()
		imglist.value.push(imgurl)
	}
	const hjjhsdcfds= (idx)=>{
		imglist.value.splice(idx,1)
	}
	onLoad((data)=>{
		formData.value.rwid = data.id
		jifen.value = data.jifen
		jxcxdfdt()
	})
	
	const jzxcdf = async()=>{
		if(!formData.value.xqicon){
			dxSToast("请选择这次任务带给你的感受是")
			return
		}
		if(!formData.value.title){
			dxSToast("请输入你想和潜意识说的话")
			return
		}
		formData.value.imgList = imglist.value.join(",")
		await dxrequest("maya/fenxiangList/fenxiangList",formData.value,"post")
		await dxrequest("maya/api/sairernwu",{
			jifen:jifen.value,
			title:"成功晒了一次任务!"
			
		},"post")
		hfer("renwujs")
	}
	
	const jxcxdfdt = async () => {
		const { data } = await dxrequest("maya/api/getUserInfo")
		if (!data.nickname) {
			uni.showModal({
				title: "温馨提示",
				content: "为了更好的体验，请设置头像 和昵称！",
				success({ confirm }) {
					if (confirm) {
						hf('userInfo')
					}
				}
			})
		}
	}
	
</script>

<style scoped>
	.jxzcxzertecr {
		display: grid;
		grid-template-columns: repeat(5, 1fr);
		grid-template-rows: repeat(1, 1fr);
		grid-column-gap: 20rpx;
		grid-row-gap: 30rpx
	}
	.xcxzcertet{
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		grid-template-rows: repeat(1, 1fr);
		grid-column-gap: 20rpx;
		grid-row-gap: 20rpx
	}
	.dfdsdsfsdrtr{
		height: 100rpx;
	}
	.xcxsdfertty{
		width: 60rpx;
	}
	.xcxsdfertty.act{
		filter: grayscale(100%);
	}
	.sdfdsxcdsftr{
		background: #F4F4F4;
		border-radius: 8rpx;
		
	}
	.zcxfdfvdsgrt{
		height: 160rpx !important;
	}
	.xzczxfsdtretrt{
		position: absolute;
		right: -10rpx;
		top: -10rpx;
		width: 50rpx;
		height: 50rpx;
		background: rgba(0,0,0,0.5);
		z-index: 8;
		border-radius: 50%;
	}
</style>